<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="path"
      :indent="20"
      :columns="columns"
      :pagination="false"
      :data="menuData"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button v-if="scope.row.roleKey !== 'admin'" type="primary" link icon="View" @click="openDrawer('查看', scope.row)">
          查看
        </el-button>
        <el-button
          v-if="scope.row.roleKey !== 'admin'"
          type="primary"
          link
          :icon="EditPen"
          @click="openDrawer('编辑', scope.row)"
        >
          编辑
        </el-button>
        <el-button v-if="scope.row.roleKey !== 'admin'" type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">
          删除
        </el-button>
      </template>
    </ProTable>
    <MenuDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { ref, onMounted,reactive } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import MenuDrawer from "@/views/system/menuMange/components/MenuDrawer.vue";
import ProTable from "@/components/ProTable/index.vue";
import { getMenuListApi } from "@/api/modules/login";
import {  reqDelMenu, reqAddMenu, reqEditMenu } from "@/api/modules/system";


const menuData = ref();
onMounted(async () => {
  getTableList()
});

const getTableList=async()=>{
  let result: any = await getMenuListApi();
  menuData.value = result.data.routerMenu;
}

const drawerRef = ref<InstanceType<any> | null>(null);
const openDrawer = (title: string, row: Partial<any> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? reqAddMenu : title === "编辑" ? reqEditMenu : undefined,
    getTableList: getTableList
  };
  drawerRef.value?.acceptParams(params);
};

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<any>();

// 删除用户信息
const deleteAccount = async (params: any) => {
  await useHandleData(reqDelMenu, { id: [params.id] }, `删除【${params.name}】用户`);
  getTableList();
};

// 批量删除用户信息
const batchDelete = async (id: string[]) => {
  await useHandleData(reqDelMenu, { id }, "删除所选用户信息");
  proTable.value?.clearSelection();
 getTableList();
};

// 表格配置项
const columns: ColumnProps[] = [
  { type: "index", label: "#", width: 150 },
  { prop: "meta.title", label: "菜单名称", align: "left", search: { el: "input" } },
  { prop: "meta.icon", label: "菜单图标" },
  { prop: "name", label: "菜单 name", search: { el: "input" } },
  { prop: "path", label: "菜单路径", width: 300, search: { el: "input" } },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
</script>
